<template>
	<view>
		<!-- 大客户填报管理 -->
		<view class="bg-white p-4" style="width: 2000rpx;">
			<view class="flex font-md" style="border-bottom: 4rpx solid #eee;">
				<view style="width: 250rpx;" class="py-3 borders text-center" :class="(active==index?'active':'')" @click="selectActive(index)" v-for="(item,index) in NavData" :key="index">
					<text>{{item.name}}</text>
				</view>
			</view>
			<view class="py-4 px-2" style="background-color: rgb(249,249,249);">
				<view class="flex justify-between">
					<view class="flex align-center">
						<text>招标会:</text>
						<view class="flex align-center px-2 ml-2" style="height: 80rpx;">
							<uni-data-select empty-text="暂无" placeholder="请选择招标会" v-model="Selectvalue" :localdata="range" @change="change"></uni-data-select>
						</view>
					</view>
					<view class="flex-1">
						
					</view>
					<view class="flex align-center">
						<view class="text-orange bg-white px-4 py-2 mr-2" style="border: 4rpx solid #fc7c08;border-radius: 10rpx;">
							<text>重置</text>
						</view>
						<view class="text-white bg-orange px-4 py-2" style="border-radius: 10rpx;">
							<text>查询</text>
						</view>
					</view>
				</view>
			</view>
		    <!-- 表格 -->
		    <view class="mt-2 flex flex-column">
		    	<view class="w-100 flex font-sm font-weight-bold"
		    		style="background-color: rgb(245,245,245);height: 80rpx;">
		    		<view class="text-center" style="width: 20%;line-height: 80rpx;">
		    			<text>订单信息</text>
		    		</view>
		    		<view class="text-center" style="width: 20%;line-height: 80rpx;">
		    			<text>填报信息</text>
		    		</view>
		    		<view class=" text-center" style="width: 20%;line-height: 80rpx;">
		    			<text>招标会信息</text>
		    		</view>
		    		<view class=" text-center" style="width: 20%;line-height: 80rpx;">
		    			<text>状态</text>
		    		</view>
		    		<view class=" text-center" style="width: 20%;line-height: 80rpx;">
		    			<text>操作</text>
		    		</view>
		    	</view>
		    	<view v-if="false" style="height: 200rpx;" class="w-100 flex justify-center align-center">
		    		暂无数据
		    	</view>
		    	<view v-else class="flex font-sm" style="height: 150rpx;border-bottom:2rpx solid rgb(221,221,211);"
		    		v-for="(item,index) in 4" :key="index">
		    		<view class="flex align-center justify-center " style="width: 20%;line-height: 70rpx;">
		    			<view class="flex justify-center w-100">
		    				<text class="text-ellipsis">这是一条订单信息</text>
		    			</view>
		    		</view>
		    		<view class="flex align-center justify-center" style="width: 20%;line-height: 70rpx;">
		    			<view class="flex justify-center">
		    				<text>手机号:15745645820</text>
		    			</view>
		    		</view>
		    		<view class="flex align-center justify-center" style="width: 20%;line-height: 70rpx;">
		    			<view class="flex justify-center">
		    				<text>无</text>
		    			</view>
		    		</view>
		    		<view class="flex align-center justify-center" style="width: 20%;line-height: 70rpx;">
		    			<text>已结束</text>
		    		</view>
		    		<view class="flex align-center justify-center" style="width: 20%;line-height: 70rpx;">
		    			<button class="font-sm bg-success text-white flex justify-center align-center"
		    				style="white-space: nowrap; width: 100rpx;height: 100rpx;">查看</button>
		    			<button class="font-sm bg-danger text-white flex justify-center align-center"
		    				style="white-space: nowrap;width: 100rpx;height: 100rpx;">删除</button>
		    		</view>
		    	</view>
		    </view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"KeyCustomerFilingManagement",
		data() {
			return {
				NavData:[
					{
						name:'全部',
					},
					{
						name:'待填报',
					},
					{
						name:'待总部确认',
					},
					{
						name:'待总部审核',
					},
					{
						name:'待客户确认',
					},
					{
						name:'客户已确认',
					},
				],
				active:0,
				Selectvalue:'',
				datetimerange:[],
				range: [],
			};
		},
		methods:{
			selectActive(index){
				this.active = index
			}
		}
	}
</script>

<style lang="scss">
.borders{
	transition: all 0.5s;
	border-bottom: 4rpx solid transparent;
}
.active{
	color:#fc7c08;
	border-bottom-color: #fc7c08;
}
</style>